15장 막연한 아이디어 다듬기 (입문판)
출처: 클로드 코드 완벽 가이드 (코드팩토리 최지호)
이 장에서 딱 4가지만 기억하세요. 1. 클로드에게 "눈"을 달아 웹사이트를 직접 보게 만드는 법 (Playwright MCP) 2. 참고 사이트를 클로드가 자동으로 둘러보고 정리하게 시키는 법 (정보 크롤링) 3. 글자만으로 화면을 빠르게 그려보고 고치는 법 (ASCII 레이아웃) 4. 대화만으로 기획서 한 장을 자동으로 받아내는 법 (PRD 작성)
이 장의 학습 목표는 이렇습니다.
- 막연한 아이디어를 구체적인 기획으로 바꾸는 4단계 흐름을 설명한다.
- 클로드 데스크톱과 클로드 코드를 용도에 따라 구분한다.
- Playwright MCP 설정과 ASCII 레이아웃 만들기를 직접 따라 한다.
참고: 이 책은 빠르게 변하는 도구를 다룹니다. 아래 나오는 요금·모델명·패키지 이름·버전은 원서 작성 시점 기준 예시입니다. 실제 값은 항상 공식 문서에서 확인하세요.
들어가기 전에: 막연한 아이디어, 어디서 막히죠?
"노마드로 살기 좋은 한국 도시를 모아 보여주는 사이트 만들고 싶다."
이런 한 줄 아이디어, 머릿속엔 있는데 막상 시작하려니 막막한 적 있죠?
- 어떤 화면으로 만들지 그림이 안 그려진다.
- 비슷한 서비스가 뭐가 있는지 일일이 찾아보기 귀찮다.
- 기획서를 써야 한다는데 뭘 써야 할지 모르겠다.
이렇게 머릿속에만 있는 흐릿한 생각을 손에 잡히는 기획으로 바꿔주는 게 이 장의 주제입니다.
이 장에서는 가상의 서비스 하나를 끝까지 같이 만들어 봅니다. 이름은 "K-노마드 리스트"입니다.
K-노마드 리스트: 디지털 노마드(노트북 하나 들고 여기저기 옮겨 다니며 일하는 사람)에게 한국의 살기 좋은 도시를 추천하는 가상의 서비스. 이 장의 실습 예제입니다.
원래 이런 아이디어는 Pieter Levels라는 개발자가 만든 "노마드 리스트"(nomads.com)라는 실제 사이트에서 따왔습니다. 우리는 그 한국 버전을 만든다고 상상하는 겁니다.
자, 흐릿한 아이디어를 어떻게 다듬는지 4단계로 따라가 봅니다.
[아이디어 다듬기 4단계]
1단계: 클로드에게 눈 달기 (Playwright MCP 설정)
↓
2단계: 참고 사이트 둘러보게 시키기 (정보 크롤링)
↓
3단계: 글자로 화면 그려보기 (ASCII 레이아웃 이터레이션)
↓
4단계: 기획서 자동으로 받기 (PRD 작성)
섹션 1: 클로드에게 "눈"을 달아주기 (Playwright MCP)
이거 이렇게 하다 막힌 적 있죠?
클로드에게 "요즘 노마드 리스트 사이트는 어떻게 생겼어?"라고 물어봤더니 "제가 직접 사이트를 볼 수는 없어서..."라는 답이 돌아온 적 있죠?
기본 상태의 클로드는 자기가 학습한 지식만으로 대답합니다. 직접 웹사이트에 들어가서 지금 화면을 보고 오지는 못합니다.
이 "직접 사이트를 보고 오는 능력"을 달아주는 게 바로 Playwright MCP입니다.
Playwright MCP: 클로드가 진짜 브라우저를 열어 웹사이트를 둘러보고 화면을 캡처하게 해주는 도구. 클로드에게 "눈"을 달아주는 장치라고 보면 됩니다.
MCP (Model Context Protocol): 클로드 같은 AI가 외부 도구(브라우저, 파일 등)와 연결되게 해주는 약속. 콘센트 규격 같은 거라, 규격만 맞으면 여러 도구를 꽂아 쓸 수 있습니다.
Playwright: 마이크로소프트가 만든 브라우저 자동화 도구. 사람 대신 브라우저를 열고 클릭하고 글자를 입력하는 로봇 손이라고 보면 됩니다.
비유 먼저
기본 클로드 = 도서관에만 앉아 있는 사서
→ 책에 적힌 내용만 알려줄 수 있음
Playwright 연결 = 현장에 직접 나가는 기자
→ 지금 그 사이트가 어떤지 직접 보고 와서 알려줌
비유를 클로드 코드의 실제 동작과 연결해 봅니다.
| 비유 | 클로드 코드에서 | 주의 |
|---|---|---|
| 도서관 사서 | 기본 상태 클로드 (학습한 지식만 사용) | 최신 사이트 모습은 모름 |
| 현장 기자 | Playwright MCP 연결된 클로드 | 도구 설치·권한 허용이 먼저 |
| 기자가 들고 다니는 카메라 | 화면 캡처 기능 | 캡처는 자동, 사람이 안 찍어도 됨 |
어디에 설치하나: 클로드 데스크톱
여기서 한 가지 짚고 갑니다. 클로드를 쓰는 창구는 크게 두 가지가 있습니다.
클로드 데스크톱: Anthropic이 만든 클로드 앱. 채팅으로 대화하며 아이디어 정리·리서치에 좋습니다.
이 장의 아이디어 다듬기 작업(크롤링, 기획, PRD)은 주로 클로드 데스크톱에서 합니다. 실제 코드를 짜고 고치는 건 클로드 코드가 더 잘합니다.
| 비유 | 클로드 코드에서 | 주의 |
|---|---|---|
| 회의실 화이트보드 | 클로드 데스크톱 (아이디어·기획·리서치) | 채팅 대화 중심 |
| 작업 공구함 | 클로드 코드 (코드 수정·개발) | 프로젝트 파일 중심 |
이 둘은 경쟁 관계가 아니라 역할 분담입니다. 아이디어는 데스크톱에서 다듬고, 코드는 클로드 코드에서 만듭니다.
따라 하기: Playwright MCP 설정 6단계
기본 사용법부터 차근차근 따라 해 봅니다.
1단계 클로드 데스크톱 실행 → [설정] 클릭
2단계 [개발자] → [설정 편집] 클릭
→ 파일 탐색기가 열리며 설정 파일 위치로 이동
3단계 열린 설정 파일(claude_desktop_config.json)에 아래 내용 입력
4단계 Node.js 설치 (nodejs.org/ko/download)
5단계 클로드 데스크톱 재시작 → 새 채팅 → 도구 목록에 playwright가 보이면 성공
6단계 테스트: "Playwright로 구글에서 코드팩토리 검색해줘"
3단계에서 넣을 설정 파일 내용은 이렇습니다.
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}
claude_desktop_config.json: 클로드 데스크톱이 "어떤 도구를 연결할지" 적어두는 설정 파일입니다. 여기에 위 내용을 적으면 "playwright라는 도구를 npx로 실행해라"라는 뜻이 됩니다.
Node.js는 왜 필요할까
위 설정에 npx라는 단어가 보이죠?
Node.js: 자바스크립트 프로그램을 컴퓨터에서 돌리게 해주는 실행기. 여기서는 Playwright MCP를 돌리는 엔진 역할입니다.
npx: Node.js에 딸려오는 실행 도구. 프로그램을 따로 설치 안 해도 바로 실행해 줍니다. 일회용 도구를 빌려 쓰는 느낌입니다.
Playwright MCP는 Node.js 세계의 패키지로 배포되고, npx로 실행됩니다.
npx는 Node.js를 깔아야 생기는 명령이라, Node.js가 없으면 도구가 아예 안 돌아갑니다.
Node.js 없음 → npx 명령 없음 → playwright 도구 실행 실패
Node.js 있음 → npx 명령 동작 → playwright 도구 정상 실행
권한 허용을 잊지 마세요
설정이 끝나도 한 가지가 남습니다. 클로드가 처음 브라우저를 조작하려 하면 "이 도구를 써도 될까요?" 하고 권한을 물어봅니다.
잘못된 예: 권한 요청을 그냥 닫음 → 도구가 동작 안 함 → "왜 안 되지?" 헤맴
올바른 예: 권한 요청에 [항상 허용] 선택 → 이후 자동으로 동작
이럴 때 이렇게: 설정은 다 했는데 클로드가 사이트를 못 본다면, 가장 먼저 권한 허용을 눌렀는지 확인하세요.
설정되면 생기는 도구들
설정이 끝나면 클로드가 쓸 수 있는 브라우저 조작 도구가 여러 개 생깁니다. 지금 이름을 다 외울 필요는 없고, "이런 일을 할 수 있구나" 정도만 봅니다.
playwright_navigate : 특정 주소로 이동
playwright_screenshot : 지금 화면 캡처
playwright_click : 버튼이나 링크 클릭
browser_navigate : 브라우저 이동
browser_type : 글자 입력
start/end/get/clear_codegen_session : 동작 기록 세션 관리
codegen session: 클로드가 브라우저에서 한 동작들을 기록해두는 작업 묶음. 나중에 같은 동작을 코드로 재현할 때 쓰는 기록장 같은 겁니다.
한 걸음 더 ▸ 패키지 이름과 버전
위 설정의 @playwright/mcp@latest에서 @latest는 "가장 최신 버전을 받아라"라는 뜻입니다.
패키지 이름이나 버전은 시간이 지나면 바뀔 수 있으니, 안 될 때는 Playwright 공식 저장소에서 현재 이름을 확인하세요.
위 패키지 이름·버전·설정 형식은 원서/노트 기준 예시이며, 최신 값은 공식 문서에서 확인하세요.
섹션 1 정리
- 기본 클로드는 웹사이트를 직접 못 본다. Playwright MCP가 "눈"을 달아준다.
- 클로드 데스크톱은 아이디어용, 클로드 코드는 코드용으로 나눠 쓴다.
- 설정은 claude_desktop_config.json에 JSON으로 적고, Node.js를 깔아야 동작한다.
- 처음 한 번은 도구 권한을 허용해야 한다.
섹션 2: 참고 사이트를 클로드가 둘러보게 하기 (정보 크롤링)
이거 이렇게 하다 막힌 적 있죠?
새 서비스를 기획하려는데 "비슷한 사이트들은 어떻게 돈을 벌고, 화면은 어떻게 생겼나"를 일일이 찾아보려니 한나절이 다 가버린 적 있죠?
이제 클로드에게 "눈"이 생겼으니, 이 귀찮은 답사를 대신 시킬 수 있습니다. 이렇게 사이트를 자동으로 둘러보며 정보를 모으는 일을 크롤링이라고 합니다.
크롤링: 웹사이트를 자동으로 돌아다니며 구조·내용·기능 같은 정보를 긁어모으는 일. 사람 대신 로봇이 사이트를 한 바퀴 답사하는 거라고 보면 됩니다.
비유 먼저
크롤링 = 건축가가 새 건물을 짓기 전 다른 멋진 건물들을 답사하는 것
1. 비슷한 건물을 직접 방문한다
2. 외관·내부 구조·동선을 꼼꼼히 본다
3. 좋은 점, 아쉬운 점을 메모한다
4. 이 메모를 바탕으로 내 설계를 시작한다
| 비유 | 클로드 코드에서 | 주의 |
|---|---|---|
| 건물 답사 | 참고 사이트 자동 방문 | 한 사이트씩, 목적 사이트를 분명히 |
| 답사 메모 | 클로드가 만든 분석 보고서 | 같은 채팅에 남겨두면 다음 단계에서 자동 활용 |
| 내 설계 시작 | 이 보고서로 기획·디자인 진행 | 보고서를 무시하면 답사한 보람이 없음 |
따라 하기: 노마드 리스트 분석시키기
클로드 데스크톱 채팅에 이렇게 부탁합니다.
너는 이제부터 사업 모델과 UI를 파악하는 전문가야.
Playwright를 사용해서 https://nomads.com/ 사이트를 분석해줘.
그러면 클로드가 알아서 이런 일을 합니다.
1. Playwright로 nomads.com에 접속
2. 버튼을 눌러보고 화면 구조를 살핀다
3. 화면을 캡처해서 분석한다
4. 아래 같은 보고서를 만들어 준다
보고서에는 보통 이런 항목들이 담깁니다.
[Nomads.com 분석 보고서 예시]
사업 모델 분석
- 비즈니스 모델 (멤버십 기반 유료 구독)
- 커뮤니티 규모
- 수익원 구조 (멤버십 수수료, 제휴 마케팅 등)
UI/UX 분석
핵심 기능 분석
타겟 사용자 분석
혁신적 특징
경쟁 우위
성장 전략 분석
위 보고서의 구독 방식·멤버 수 같은 수치는 원서/노트 기준 예시이며, 실제 사이트의 현재 값과 다를 수 있습니다.
이렇게 사람이 한나절 걸려 할 답사를 클로드가 몇 분 만에 끝내줍니다.
핵심: 같은 채팅에서 이어가기
크롤링에서 가장 중요한 요령이 하나 있습니다. 바로 "같은 채팅에서 대화를 이어가는 것"입니다.
콘텍스트: 클로드가 이번 대화에서 지금까지 쌓아온 배경 정보. 같은 채팅이면 앞에서 한 얘기를 클로드가 계속 기억합니다.
잘못된 예: 크롤링은 A 채팅에서 하고, 기획은 새 채팅 B에서 처음부터 시작
→ 클로드가 분석 결과를 기억 못 함 → 다 다시 설명해야 함
올바른 예: 크롤링한 그 채팅에서 그대로 기획을 이어감
→ 분석 보고서가 콘텍스트에 남아 있어 클로드가 알아서 참고함
이럴 때 이렇게: 크롤링이 끝나면 채팅을 닫지 말고, 그 자리에서 바로 "이제 이걸 참고해서 우리 서비스를 기획해보자"라고 이어가세요.
한 걸음 더 ▸ 채팅을 깔끔하게 유지하기
여러 사이트를 분석할 때는, 분석할 사이트마다 채팅을 나누는 게 좋을 수도 있습니다. 하지만 기획까지 한 흐름으로 가고 싶다면, 핵심 작업은 한 채팅에 모아두는 편이 콘텍스트 활용에 유리합니다. 서로 다른 주제가 한 채팅에 마구 섞이면 클로드가 헷갈릴 수 있으니, "한 채팅 = 한 목표"를 기억하세요.
섹션 2 정리
- 크롤링은 클로드가 참고 사이트를 자동으로 답사해 보고서를 만들어 주는 일이다.
- 사업 모델, UI/UX, 핵심 기능, 타겟 사용자, 경쟁 우위 등 다양한 항목을 분석한다.
- 크롤링한 그 채팅에서 기획을 이어가야 분석 결과가 자동으로 활용된다.
섹션 3: 글자로 화면을 빠르게 그려보기 (ASCII 레이아웃)
이거 이렇게 하다 막힌 적 있죠?
화면을 어떻게 만들지 정하려고 곧장 HTML·CSS 코드로 만들기 시작했는데, "여기 버튼 위로 옮겨줘" 한마디에 코드를 통째로 다시 짠 적 있죠?
코드로 먼저 만들면 수정이 무겁습니다. 그래서 코드를 짜기 전에, 글자만으로 화면 뼈대를 먼저 그려봅니다. 이걸 ASCII 레이아웃이라고 합니다.
ASCII 레이아웃: 그림 도구 없이 글자와 기호만으로 화면 배치를 그려보는 간단한 밑그림. 화면을 종이에 연필로 슥슥 그려보는 스케치라고 보면 됩니다.
이터레이션: 만들고 → 보고 → 고치고를 여러 번 반복하는 것. "반복 개선"이라는 뜻입니다.
비유 먼저
ASCII 레이아웃 = 건물 짓기 전 종이에 그리는 스케치
바로 건물을 지으면? 마음에 안 들면 부수고 다시 → 비용 폭탄
종이에 먼저 그리면? "이 벽 여기로" 한마디로 수정 → 빠르고 쌈
| 비유 | 클로드 코드에서 | 주의 |
|---|---|---|
| 연필 스케치 | ASCII 레이아웃 요청 | 정밀한 색·여백까지 표현은 못 함 |
| 벽 옮기기 한마디 | "이 부분 수정해줘" 요청 | 글자라서 수정이 매우 가벼움 |
| 완성된 스케치 | 확정된 ASCII 레이아웃 | 이게 나중에 실제 화면의 밑그림이 됨 |
따라 하기 1: 작은 조각부터 (도시 카드)
전체 화면을 한 번에 만들려 하지 말고, 작은 조각 하나부터 시작합니다. 먼저 도시 하나를 보여주는 "카드" UI를 부탁합니다.
프롬프트: 도시 카드 UI를 ASCII 코드로 제작해줘
결과는 이런 식으로 나옵니다.
+-----------------------------------------------+
| 서울 |
| 글로벌 메가시티 |
| |
| 노마드 점수: 4.06/5.0 월 예상비용: 180만원 |
| |
| 생활비 |*** | 인터넷 속도 |*****| |
| 음식 & 문화 |*****| 교통 접근성 |*****| |
| 업무 환경 |*****| 안전도 |**** | |
| |
| 추천 지역: 강남 · 홍대 · 성수동 · 을지로 |
+-----------------------------------------------+
마음에 안 드는 부분이 보이면 그냥 말로 고칩니다.
"점수를 카드 맨 위로 올려줘"
"추천 지역 줄을 빼줘"
코드를 안 건드리고 글자만 바꾸니, 몇 초 만에 새 버전을 받습니다.
따라 하기 2: 조각이 정해지면 전체로 확장 (홈페이지)
카드가 마음에 들면, 이제 전체 홈페이지로 키웁니다.
프롬프트: 홈페이지 UI를 ASCII 코드로 디자인해줘
결과 예시입니다.
+================================================+
| K-NOMAD HUB |
| 대한민국 디지털 노마드 도시 가이드 |
| |
| 홈 | 도시탐색 | 비교하기 | 커뮤니티 | 가이드 |
| 검색: [_____] |
| |
| 예산: [100만원 이하] 지역: [전체] |
| 환경: [코워킹 필수] 계절: [봄] |
| [ 도시 찾기 ] |
+================================================+
배너부터 메뉴, 검색, 필터까지 한눈에 보입니다. 역시 마음에 안 드는 부분만 말로 고치면 됩니다.
이터레이션의 세 가지 원칙
1. 작은 단위부터 : 전체 페이지 말고 카드 하나부터
2. 빠른 피드백 루프 : 만들기 → 보기 → 고치기 → 반복
3. 점진적 확장 : 카드 → 홈페이지 → 상세 페이지 → 전체 사이트
다른 방법과 비교하면
화면 밑그림을 만드는 방법은 여러 가지입니다. 상황에 맞게 고릅니다.
| 비유 | 클로드 코드에서 | 주의 |
|---|---|---|
| 디자인 툴(피그마 등) | 정밀한 와이어프레임 | 정확하지만 시간이 더 걸림 |
| ASCII 레이아웃 | 클로드에게 글자 밑그림 요청 | 매우 빠르지만 구조만 확인 가능 |
| 바로 코딩 | HTML/CSS로 직접 구현 | 정밀하지만 수정 비용이 큼 |
와이어프레임: 화면의 뼈대만 그린 저수준 설계도. 색·꾸밈 없이 배치만 보는 그림입니다.
이럴 때 이렇게: 아이디어를 막 검증하는 단계라면 ASCII 레이아웃이 제일 빠릅니다. 디자인을 픽셀 단위까지 확정할 때 디자인 툴로 넘어가면 됩니다.
섹션 3 정리
- ASCII 레이아웃은 글자만으로 화면 뼈대를 그려보는 빠른 밑그림이다.
- 카드 같은 작은 조각부터 만들고, 정해지면 전체 화면으로 확장한다.
- 수정은 말 한마디로 가능해서 코드로 만드는 것보다 훨씬 빠르다.
- 확정된 ASCII 레이아웃은 이후 실제 화면 구현의 밑그림이 된다.
섹션 4: 대화만으로 기획서 받아내기 (PRD 작성)
이거 이렇게 하다 막힌 적 있죠?
"개발 시작 전에 기획서부터 완벽하게 써오세요." 이 말에 며칠을 문서만 붙잡고 있다가, 정작 기획이 바뀌어 처음부터 다시 쓴 적 있죠?
그럴 필요가 없습니다. 지금까지 클로드와 나눈 대화 자체가 이미 기획입니다. 그걸 한 장의 문서로 정리해달라고 하면 됩니다. 그게 PRD입니다.
PRD (Product Requirements Document): 제품 요구사항 문서. "무엇을 왜 어떻게 만들지" 한곳에 정리한 기획서입니다.
비유 먼저
전통적 방식 = 백과사전을 처음부터 끝까지 혼자 쓰는 것
기획서 작성(며칠) → 검토 → 수정 → 그제야 개발
클로드 방식 = 전문 비서와 대화하며 핵심만 정리하는 것
한 줄 아이디어 → 크롤링 → ASCII 디자인 → "정리해줘" → PRD 완성
| 비유 | 클로드 코드에서 | 주의 |
|---|---|---|
| 며칠 걸려 쓰는 백과사전 | 전통적 기획서 작성 | 기획 바뀌면 통째로 재작성 |
| 핵심만 받아쓰는 비서 | 대화 기반 PRD 자동 생성 | 대화를 같은 채팅에 쌓아둬야 함 |
| 받아쓴 회의록 | 자동 생성된 PRD | 출발점이지 끝이 아님, 계속 다듬음 |
따라 하기: K-노마드 리스트 PRD 받기
앞 단계(크롤링, ASCII 디자인)를 한 채팅에서 다 했다면, 이제 정리만 부탁하면 됩니다.
너는 지금부터 PRD 작성 전문가인 프로덕트 매니저야.
지금까지의 대화를 기반으로 아래 요소를 포함한 PRD를 작성해줘.
# 문제 정의
한국에서 디지털 노마드로 살고 싶은 사람들에게 정리된 정보를
제공하는 사이트가 없어. 도시별 생활 조건을 쉽게 찾는 사이트를 만들려고 해.
# 타겟 사용자
디지털 노마드로 살고 싶은 사람들
# 제안 해결책
지금까지 대화한 기획과 UI 레이아웃을 기반으로...
그러면 클로드가 이런 항목을 갖춘 PRD를 만들어 줍니다.
[K-노마드 허브 PRD]
1. 문제 정의
2. 타겟 사용자
3. 제안 해결책
4. 핵심 기능 목록
5. UI/UX 요구사항
6. 기술 스택
7. 마일스톤 및 일정
8. 성공 지표(KPI)
기술 스택: 그 서비스를 만드는 데 쓰는 기술·도구 묶음. 요리로 치면 재료와 조리 도구 목록입니다.
KPI: 성공을 재는 핵심 숫자 지표. "가입자 수", "재방문율"처럼 목표 달성을 확인하는 잣대입니다.
핵심은, 앞 단계를 같은 채팅에서 했기 때문에 클로드가 그 내용을 다 기억하고 알아서 채워준다는 점입니다.
생각의 전환: 문서보다 상품에 집중
[옛날 생각] PRD를 완벽하게 다 쓴 다음에 개발을 시작해야 한다
[AI 시대 생각]
1. 문서보다 상품에 집중한다
→ 대화하며 아이디어를 다듬는 과정 자체가 곧 기획이다
2. 완벽한 PRD는 필요 없다
→ 클로드가 대화 내용을 이미 기억하니, 빠르고 섬세한 PRD가 나온다
3. 자연스러운 흐름으로 점점 구체화한다
→ 아이디어 → 대화 → 크롤링 → ASCII 레이아웃 → PRD
"문서보다 상품에 집중하라"는 말은, 하루 종일 기획서만 다듬지 말고 실제로 만들어볼 수 있는 형태(시제품)로 빨리 가자는 뜻입니다.
전통 방식과 클로드 방식 비교
| 비유 | 클로드 코드에서 | 주의 |
|---|---|---|
| 손으로 다 조사 | 전통: 수동 리서치 | 시간이 오래 걸림 |
| 비서가 자료 대신 모음 | 클로드: Playwright 크롤링 | 같은 채팅에서 이어가야 효과 |
| 문서 통째 재작성 | 전통: 수정 비용 큼 | 기획 변경에 약함 |
| 말로 수정 요청 | 클로드: 대화로 즉시 수정 | 변화에 강함 |
한 걸음 더 ▸ PRD는 출발점이지 결승선이 아님
자동으로 받은 PRD가 완벽하진 않을 수 있습니다. "마일스톤 일정이 빡빡해 보여, 더 여유 있게 잡아줘"처럼 계속 대화로 다듬으면 됩니다. PRD는 한 번 쓰고 끝내는 문서가 아니라, 개발하면서 같이 자라는 문서로 보는 게 좋습니다.
섹션 4 정리
- PRD는 무엇을 왜 어떻게 만들지 정리한 기획서다.
- 앞 단계를 같은 채팅에서 했다면, "정리해줘" 한마디로 PRD를 자동 생성할 수 있다.
- AI 시대의 핵심은 "완벽한 문서"가 아니라 "문서보다 상품에 집중"하는 태도다.
전체 흐름 다시 보기
흐릿한 한 줄 아이디어가 손에 잡히는 기획서가 되기까지, 우리가 따라온 길입니다.
한 줄 아이디어
↓ (클로드에게 눈 달기)
Playwright MCP 설정
↓ (참고 사이트 답사)
정보 크롤링 → 분석 보고서
↓ (글자로 밑그림)
ASCII 레이아웃 → 화면 확정
↓ ("정리해줘")
PRD 자동 생성 → 개발 시작!
이 네 단계를 같은 채팅에서 이어서 하는 것, 그게 이 장의 가장 큰 비결입니다. 앞 단계 결과가 콘텍스트에 쌓여, 뒤로 갈수록 결과물이 점점 똑똑해집니다.
직접 해보기 (연습문제)
문제 1 (기본): Playwright MCP 설정
클로드 데스크톱에 Playwright MCP를 연결하려고 합니다. 설정 파일에 넣을 내용을 적고, Node.js가 왜 필요한지 한 문장으로 설명해 보세요.
정답 보기
설정 파일(claude_desktop_config.json) 내용:{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}
Node.js가 필요한 이유: 위 설정의 `npx` 명령이 Node.js를 깔아야 생기는 명령이라, Node.js가 없으면 Playwright MCP가 아예 실행되지 않기 때문입니다.
문제 2 (기본): 올바른 순서 맞히기
아래 작업을 아이디어 다듬기 순서대로 늘어놓아 보세요.
- PRD 작성
- ASCII 레이아웃으로 화면 디자인
- Playwright로 참고 사이트 크롤링
- 한 줄 아이디어 정리
정답 보기
1. 한 줄 아이디어 정리 — 예: "한국에서 노마드로 살기 좋은 도시를 보여주는 서비스를 만들자" 2. Playwright로 참고 사이트 크롤링 — 결과물: nomads.com 분석 보고서 3. ASCII 레이아웃으로 화면 디자인 — 결과물: 도시 카드·홈페이지 ASCII 밑그림 4. PRD 작성 — 결과물: 문제 정의·타겟 사용자·기능·기술 스택이 담긴 기획서 핵심: 같은 채팅에서 순서대로 하면 앞 단계 결과가 자동으로 콘텍스트에 쌓여, 뒤로 갈수록 결과가 더 구체적으로 나옵니다.문제 3 (중급): 같은 채팅을 고집하는 이유
크롤링은 A 채팅에서 하고, 기획은 새 채팅 B에서 시작했더니 클로드가 분석 결과를 기억 못 했습니다. 무엇이 문제였고 어떻게 고쳐야 할까요?
정답 보기
문제: 클로드는 같은 채팅 안에서만 앞선 대화(콘텍스트)를 기억합니다. 새 채팅 B에서는 A 채팅의 크롤링 보고서가 콘텍스트에 없으니 기억하지 못합니다. 해결: 크롤링한 그 채팅(A)에서 그대로 기획·디자인·PRD까지 이어서 진행하면, 분석 보고서가 콘텍스트에 남아 클로드가 알아서 참고합니다.문제 4 (심화): 문서보다 상품에 집중하라
"완벽한 PRD를 먼저 쓰고 개발해야 한다"는 옛 방식과, 클로드를 활용한 방식의 차이를 두 가지 이상 들고, "문서보다 상품에 집중하라"는 말의 뜻을 설명해 보세요.
정답 보기
차이 예시: - 작성 시간: 전통 방식은 수일~수주, 클로드 방식은 대화 + 자동 생성으로 훨씬 짧음 - 참고 자료: 전통 방식은 수동 조사, 클로드 방식은 Playwright 자동 크롤링 - 수정 비용: 전통 방식은 문서 전체 재작성, 클로드 방식은 대화로 즉시 수정 - 콘텍스트: 전통 방식은 별도 문서로 관리, 클로드 방식은 채팅에 자동 축적 "문서보다 상품에 집중하라"의 뜻: 하루 종일 기획서만 완성도 높이려 애쓰기보다, 클로드와 대화하며 아이디어를 빠르게 구체화하고 실제 만들어볼 수 있는 형태로 빨리 가는 게 더 낫다는 의미입니다. 대화 자체가 기획이고, 그 결과를 클로드가 PRD로 정리해주기 때문입니다.한눈에 보는 용어 정리
| 용어 | 한 문장 뜻 | 일상 비유 |
|---|---|---|
| Playwright MCP | 클로드가 브라우저로 사이트를 둘러보게 해주는 도구 | 클로드에게 달아주는 눈 |
| MCP | AI를 외부 도구와 연결하는 약속 | 콘센트 규격 |
| Playwright | 브라우저를 자동으로 조작하는 도구 | 로봇 손 |
| Node.js | 자바스크립트 프로그램을 돌리는 실행기 | 도구를 돌리는 엔진 |
| npx | 설치 없이 패키지를 바로 실행하는 명령 | 일회용 도구 대여 |
| 크롤링 | 사이트를 자동으로 둘러보며 정보 수집 | 로봇이 답사 다님 |
| 콘텍스트 | 한 채팅에 쌓인 배경 정보 | 대화의 기억 |
| ASCII 레이아웃 | 글자로 그린 화면 밑그림 | 연필 스케치 |
| 이터레이션 | 만들고 고치기를 반복 | 스케치 고쳐 그리기 |
| 와이어프레임 | 화면 뼈대만 그린 설계도 | 건물 골조 도면 |
| PRD | 무엇을 왜 어떻게 만들지 정리한 기획서 | 회의록 받아쓰기 |
| 기술 스택 | 만드는 데 쓰는 기술·도구 묶음 | 재료·조리 도구 목록 |
| KPI | 성공을 재는 핵심 숫자 지표 | 점수판 |
참고 링크
- 노마드 리스트(참고 사이트): nomads.com
- Playwright 공식 문서: playwright.dev
- Playwright MCP 패키지: npmjs.com/package/@playwright/mcp
- Node.js 설치: nodejs.org/ko/download
- MCP 표준 문서: modelcontextprotocol.io
- 저자 예제 저장소: github.com/codefactory-co
위 패키지 이름·도구 버전은 원서/노트 기준 예시이며, 최신 값은 각 공식 문서에서 확인하세요.
다음 장 예고: 다음 장에서는 이렇게 다듬은 아이디어를 실제로 만들어 나가는 이야기를 다룹니다. 지금 몰라도 됩니다.
클릭하거나 Space를 눌러 뒤집기